 <template>
 	<div class="app">
 		<div class="left-area">
 			<div class="head">
 				<div class="search-warp center">
 					<uiInput @search="searchDirs" />
 				</div>
 			</div>
 			<div class="dirs">
 				<div class="dir-item" v-for="(dir,index) in dirs" :key="index" @click="setMainIcon(dir,)">
 					<div class="dir-name">{{ dir.name }} </div>
 					<div class="dir-imgs">
 						<img class="dir-img" :src="'https://themecenter.github.io/' + img.url"
 							v-for="(img,index) in dir.imgs" :key="'IMG'+index" />
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="main-area">

 			<div class="head main-head">
 				<div class=" blur center" style="width: 100%;">
 					<div style="width: 200px;">
 						<uiInput @search="searchIcons" />
 					</div>
 				</div>
 			</div>
 			<div class="icons">

 				<div class="main-icons-all">
 					<van-collapse v-model="collapse" ref="collapse">
 						<van-collapse-item :title="item.name" :name="item.name" v-for="(item, eindex) in mainData.list"
 							:key="eindex+'x'">
 							<div class="main-icons">
 								<div class="m-item center" v-for="(img, imgindex) in item.list"
 									:key="imgindex + 'img2'" @click="seeCur(img)">
 									<img :src="'https://themecenter.github.io/'+img.url" alt="" srcset="" />
 									<div class="title">{{ img.name }}</div>
 								</div>
 							</div>
 						</van-collapse-item>
 					</van-collapse>

 					<div class="van-collapse-item">
 						<div class="van-collapse-item__wrapper">
 							<div class="van-collapse-item__content">



 								<div class="main-icons" style="padding:0 0 40px 0">
 									<div class="m-item center" v-for="(img, imgindex) in mainData.imgs"
 										:key="imgindex + 'img3'" @click="seeCur(img)">
 										<img :src="'https://themecenter.github.io/'+img.url" alt="" srcset=""
 											:title="img.url" style="width:80pxheight:80px" />
 										<div class="title">{{ img.name }}</div>
 									</div>
 								</div>

 							</div>
 						</div>

 					</div>



 				</div>

 			</div>
 			<div class="fixed blur">
 				<div class="ui-btn" @click="greet()">
 					购买图标 {{allPrice?'$' + allPrice:''}}
 				</div>
 			</div>
 		</div>





 		<div class="right-area" v-if="cur.url">


 			<div class="mask">
 				<div class="mask-img">
 				</div>
 			</div>
 			<div class="content">
 				<div class="cur-img-warp center">
 					<img :src="'https://themecenter.github.io/' + cur.url"
 						style="widht:80px;height:80px;margin:100px 0 50px 0" />
 				</div>

 				<div class="txt-area center">
 					<div class="name">
 						Fluent Design System
 					</div>

 					<div class="auth">
 						作者
 					</div>
 					<div class="ui-btn">
 						购买图标 ${{cur.price}}
 					</div>

 					<div class="date">
 						发布日期
 					</div>

 					<div class="comment">
 						评论
 					</div>
 				</div>
 			</div>

 		</div>
 	</div>
 </template>
 <script>
  import uiInput from  '../components/uiInput.vue'
 	export default {
    components:{ uiInput },
 		data() {
 			return {
 				search: '',
 				dirs: [],
 				curDir: -1,
 				searchicon: '',
 				mainData: {},
 				collapse: [],
 				cur: {},
 				greetMsg: '',
 			}
 		},
 		created() {
 			this.load()
      		window.ipcRenderer.send('apply2', {url:1,name: "Figma.app"});
 		},
 		methods: {
 			async greet() {
  
 			},
 			seeCur(img) {
 				this.cur = img;
 			},
 			async searchDirs(searchDir) {
 				console.log("call searchDirs ", searchDir);
 				if (searchDir) {
 					this.dirs = window.dirs.filter((e) =>
 						e.name.toLocaleLowerCase().includes(searchDir.toLocaleLowerCase())
 					);
 				} else {
 					this.dirs = JSON.parse(JSON.stringify(window.dirs));
 				}
 			},
 			async searchIcons(searchIcon) {
 				var allData = JSON.parse(JSON.stringify(window.mainData))
 				var key = searchIcon.toLocaleLowerCase()
 				if (searchIcon) {
 					var tmp = []
 					allData.list.map(e => {
 						tmp = tmp.concat(e.list.filter(each => each.name.toLocaleLowerCase().includes(key)))
 					})
 					tmp = tmp.concat(allData.imgs.filter(each => each.name.toLocaleLowerCase().includes(key)))

 					this.mainData.imgs = tmp
 					this.mainData.list = []
 				} else {
 					this.mainData = allData;
 				}
 			},
 			setMainIcon(item, index) {
 				this.dactive = index;
 				console.log(item);
 				this.mainData = JSON.parse(JSON.stringify(item))
 				this.mainData.list = this.mainData.list.filter(e => e.list)
 				var tmp = 0;
 				this.mainData.list.map(e => {
 					if (e.list) tmp += e.list.map(e => e.price).reduceRight((acc, curr) => acc + curr, 0)
 					else tmp += e.price
 				})
 				this.allPrice = tmp
 				window.allPrice = tmp
 				window.mainData = JSON.parse(JSON.stringify(this.mainData));
 				setTimeout(() => {
 					this.$refs.collapse.toggleAll(true);
 				}, 500)

 			},
 			async load() {
 				var th = this;
 				fetch("http://themeCenter.github.io/icons.list.json")
 					.then((response) => {
 						return response.json();
 					})
 					.then((data) => {
 						th.icon = {};

 						var tmp = JSON.parse(JSON.stringify(data))
 						tmp.list.map(e => {
 							th.icon[e.name] = e.list
 						})

 						th.dirs = data.list
 						th.dirs = th.dirs.map(e => {
 							e.imgs = []
 							if (e.list) {
 								e.imgs = e.list.filter(e => ['png', 'jpg'].includes(e.tail))
 							}
 							e.imgs = e.imgs.slice(0, 5)
 							return e
 						})

 						window.dirs = JSON.parse(JSON.stringify(th.dirs));
 						console.log(window.dirs);
 					})
 					.catch((error) => {
 						console.error("Error fetching data:", error);
 					});
 			}
 		}
 	}
 </script>

 <style>
  

 	::-webkit-scrollbar {
 		display: none;
 	}

 	.blur {
 		background-color: var(--blur-color);
 		backdrop-filter: blur(10px);
 	}

 	.flex1 {
 		flex: 1;

 	}

 	.between {
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
 	}

 	.center {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	}

 	.app {
 		display: flex;
    background-color: var(--bg);
 	  color: var(--color);
 	}

 	.left-area {
 		width: 300px;

 	}

 	.head {
 		height: 52px;
 		display: flex;
 		border-bottom: 1px solid var(--border-color);
 	}


 	.search-warp {
 		width: 100%;
 	}

 	.search {}

 	.dirs {
 		height: calc(100vh - 53px);
 		overflow: auto;
 	}

 	.dir-item {
 		margin: 10px;
 		padding: 10px;
 		border-radius: 10px;
 	}

 	.dir-item:hover {
 		background-color: #00000010;
 	}

 	.dir-name {
 		font-size: 16px;
 		font-weight: 800;
 	}

 	.dir-imgs {
 		display: flex;
 		margin-top: 4px;
 	}

 	.dir-img {
 		width: 32px;
 		height: 32px;
 		margin: 2px 8px;
 	}

 	.main-area {
 		width: calc(100vw - 600px);
 		border-left: 1px solid var(--border-color);
 		border-right: 1px solid var(--border-color);
 		position: relative;
 	}

 	.main-head {
 		position: absolute;
 		z-index: 1;
 		width: 100%;
 	}


 	.icons {
 		height: calc(100vh - 53px);
 		overflow: auto;
 		position: relative;
 		overflow: auto;
 		z-index: 0;
 		padding: 0 20px;

 	}

 	.main-icons {
 		display: flex;
 		flex-wrap: wrap;
 		align-content: baseline;
 	}

 	.m-item {
 		width: 90px;
 		height: 90px;
 		margin: 7px;
 		padding: 8px;
 		border-radius: 10px;

 	}

 	.m-item:hover {
 		background-color: #00000010;
 	}

 	.m-item img {
 		width: 70px;
 		height: 70px;

 	}

 	.m-item .title {
 		width: 100px;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		text-align: center;
 		font-size: 12px;
 		color: van(--color);
 	}

 	.icon {}

 	.center {}

 	.title {}

 	.fixed {
 		padding: 13px 7px;
 		position: relative;
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
 		top: -12px;
 	}

 	.ui-btn {
 		text-align: center;
 		height: 28px;
 		line-height: 28px;
 		border-radius: 4px;
 		width: 210px;
 		color: #fff;
 		border-image-repeat: round;
 		border-image-source: url('../src/assets/macButtonAccentDarkNormal.svg');
 		border-image-width: 27px;
 		border-image-slice: 14;
 	}




 	.right-area {
 		width: 300px;
 	}

 	.name {
 		font-size: 20px;
 	}

 	.auth {
 		margin: 10px 0;
 	}

 	.date {
 		margin: 10px 0;
 	}

 	.comment {
 		margin: 10px 0;
 	}
 </style>